<template>
	<view>
		<view class="date-content">
			<view class="date-picker">
				<picker mode="date" :value="startDate" @change="handleStartDateChange" :fields="fields">
					<view class="picker-view">{{
		        startDate || "请选择开始时间"
		      }}</view>
				</picker>
			</view>
			<text class="dash">-</text>
			<view class="date-picker">
				<picker mode="date":value="endDate" @change="handleEndDateChange" :fields="fields">
					<view class="picker-view">{{
		        endDate || "请选择结束时间"
		      }}</view>
				</picker>
			</view>
		</view>
		<view class="buttons">
			<button type="default" @click="resetFilters" class="reset-button">
				重置
			</button>
			<text class="dash"> </text>
			<button type="primary" @click="fetchSalaryData" class="query-button">
				查询
			</button>
		</view>
	</view>
</template>

<script>
import isHaveBug from '../../../utils/bug'
	export default {
		data() {
			return {
				type: '',
				startDate: '',
				endDate: '',
				fields:''
			}
		},
		onLoad(e) {
			this.type = e.type
			this.startDate = e.startDate
			this.endDate = e.endDate
			this.fields = e.fields
		},
		methods: {
			handleStartDateChange(e) {
				this.startDate = e.detail.value;
			},
			handleEndDateChange(e) {
				this.endDate = e.detail.value;
			},
			resetFilters() {
				if(this.type=='px' && isHaveBug("HR-APP-024")){
					return
				}
				this.startDate = "";
				this.endDate = "";
				let eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('timeScreen',this.startDate, this.endDate)
				uni.navigateBack()
			},
			fetchSalaryData(){
				if (this.type=='jl' && isHaveBug("HR-APP-026")){
					return
				}
				let eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('timeScreen',this.startDate, this.endDate)
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.date-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}

	.date-picker {
		flex: 1;
		padding: 4px;
		border-radius: 10px;
		background-color: #fff;
		border: 1px solid #ccc;
		text-align: center;
	}

	.picker-view {
		font-size: 14px;
		color: #333;
		line-height: 44px;
		height: 44px;
	}

	.dash {
		padding: 0 10px;
		font-size: 30px;
		color: #333;
	}


	.buttons {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}

	button {
		flex: 1;
		margin: 0 5px;
		padding: 0px;
		font-size: 15px;
		border-radius: 12px;
	}

	.reset-button {
		background-color: #f5f5f5;
		color: #333;
		border: 1px solid #ccc;
	}

	.query-button {
		background-color: #007aff;
		color: #fff;
	}
</style>